{extend name="layout" /}

{block name="style"}
<link rel="stylesheet" href="/assets/css/articles.css">
{/block}

{block name="content"}
<!-- 页面头部 -->
<div class="page-header">
    <div class="container">
        <h1 data-aos="fade-up">新闻动态</h1>
        <p data-aos="fade-up" data-aos-delay="100">了解最新的产品动态和行业资讯</p>
        <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="200">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="/index.html">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">新闻动态</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 文章列表 -->
        <div class="col-lg-8">
            <div class="article-list">
                {carefree:article limit='10' order='create_time desc' hascover='1' id='article' empty='<div class="text-center py-5" data-aos="fade-up"><i class="bi bi-inbox" style="font-size: 4rem; color: #cbd5e1;"></i><p class="mt-3 text-secondary">暂无文章</p></div>'}
                <article class="article-card" data-aos="fade-up">
                    <div class="row g-0">
                        <div class="col-md-5">
                            <img src="{$article.cover_image ?: '/assets/images/placeholder/article.svg'}" alt="{$article.title}" class="article-image">
                        </div>
                        <div class="col-md-7">
                            <div class="article-content">
                                <div class="article-meta">
                                    <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d'}</span>
                                    <span><i class="bi bi-person"></i> {$article.author_name ?: '管理员'}</span>
                                    <span><i class="bi bi-eye"></i> {$article.view_count ?: 0}</span>
                                </div>
                                <h3><a href="/article/{$article.id}.html">{$article.title}</a></h3>
                                <p class="article-summary">{$article.summary ?: $article.content_preview}...</p>
                                {notempty name="article.tags"}
                                <div class="article-tags">
                                    {volist name="article.tags" id="tag"}
                                    <a href="/tag-{$tag.id}.html" class="article-tag">{$tag.name}</a>
                                    {/volist}
                                </div>
                                {/notempty}
                                <a href="/article/{$article.id}.html" class="read-more">
                                    阅读全文 <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
                {/carefree:article}
            </div>

            <!-- 分页 -->
            {notempty name="pagination"}
            {if condition="$pagination.total_pages > 1"}
            <div class="pagination-wrapper" data-aos="fade-up">
                <nav aria-label="文章分页">
                    <ul class="pagination justify-content-center">
                        <!-- 上一页 -->
                        {if condition="$pagination.current_page > 1"}
                        <li class="page-item">
                            <a class="page-link" href="{$pagination.current_page == 2 ? '/articles.html' : '/articles-' . ($pagination.current_page - 1) . '.html'}">上一页</a>
                        </li>
                        {/if}

                        <!-- 页码列表 -->
                        {for start="1" end="$pagination.total_pages" name="i"}
                        <li class="page-item {$i == $pagination.current_page ? 'active' : ''}">
                            <a class="page-link" href="{$i == 1 ? '/articles.html' : '/articles-' . $i . '.html'}">{$i}</a>
                        </li>
                        {/for}

                        <!-- 下一页 -->
                        {if condition="$pagination.current_page < $pagination.total_pages"}
                        <li class="page-item">
                            <a class="page-link" href="/articles-{$pagination.current_page + 1}.html">下一页</a>
                        </li>
                        {/if}
                    </ul>
                </nav>
            </div>
            {/if}
            {/notempty}
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            {include file="sidebar" /}
        </div>
    </div>
</div>
{/block}
